<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>应用编辑</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css">
    <link rel="icon" href="href="${pageContext.request.contextPath}/static/libs/uiframe/frame/static/image/code.png">
    <style type="text/css">
        .layui-input-block {
            margin-left: 130px;
            min-height: 36px;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 100px;
            font-weight: 400;
            text-align: right;
        }
    </style>
    <form class="layui-form c3form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">应用名称：</label>
            <div class="layui-input-block">
                <input type="text" name="mapName" value="${map.mapName}"
                       lay-verify="mapName" autocomplete="off" placeholder="请输入应用名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">比例尺：</label>
            <div class="layui-input-block">
                <input type="text" name="pixelRatio" value="${map.pixelRatio}"
                       lay-verify="" autocomplete="off" placeholder="请输入比例尺" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">logo是否显示：</label>
            <div class="layui-input-block">
                <c:choose>
                    <c:when test="${map.logo == 'true'}">
                        <input type="radio" name="logo" value="true" title="是" >
                        <input type="radio" name="logo" value="false" title="否" checked="checked" >
                    </c:when>
                    <c:when test="${map.logo == 'false'}">
                        <input type="radio" name="logo" value="true" title="是" checked="checked" >
                        <input type="radio" name="logo" value="false" title="否" >
                    </c:when>
                    <c:otherwise>
                        <input type="radio" name="logo" value="true" title="是" >
                        <input type="radio" name="logo" value="false" title="否" checked="checked">
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">缩放级别：</label>
            <div class="layui-input-block">
                <input type="text" name="zoom" value="${map.zoom}"
                       lay-verify="number" placeholder="请输入缩放级别，如：7" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">最大缩放级别：</label>
            <div class="layui-input-block">
                <input type="text" name="maxZoom" value="${map.maxZoom}"
                       lay-verify="number" placeholder="请输入最大缩放级别，如：17" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">最小缩放级别：</label>
            <div class="layui-input-block">
                <input type="text" name="minZoom" value="${map.minZoom}"
                       lay-verify="number" placeholder="请输入最小缩放级别，如：5" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">中心点：</label>
            <div class="layui-input-block">
                <input type="text" name="center" value="${map.center}"
                       lay-verify="center" placeholder="请输入中心点，如：117.089151, 36.738693" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">投影类型：</label>
            <div class="layui-input-block">
                <input type="text" name="projection" value="${map.projection}"
                       placeholder="请输入投影类型，如：EPSG:4326" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述：</label>
            <div class="layui-input-block">
                <textarea name="description" value="${map.description}"
                          placeholder="请输入描述内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="mapadd">提 交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
            </div>
        </div>
    </form>

    <script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
    <script>
        var mapId = '${map.mapId}';

        layui.use(['form','layer'],function(){
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer;
            <%--$("input[name='username']").val('${user.username}');--%>

            //自定义验证规则
            form.verify({
                number:function (value) {
//                    if(/^\d+\d+\d$/.test(value)){
//                        return '输入项必须为数字';
//                    }
                },

                mapName: function(value){
                    if(value.length < 2){
                        return '应用名称至少得2个字符';
                    }
                },
                description: function(value){
//                    if(value.length < 2){
//                        return '描述至少得2个字符啊';
//                    }
                }
            });

            //监听提交
            form.on('submit(mapadd)', function(data){
                var formData = data.field,url,viewData={};
                if(mapId == ""){
                    url = '${pageContext.request.contextPath}/ol/mapcreate';
                }else{
                    url = '${pageContext.request.contextPath}/ol/mapupdate';
                }
                if(formData['zoom'] != null && formData['zoom'] != ""){
                    viewData['zoom'] = formData['zoom'];
                }
                if(formData['maxZoom'] != null && formData['maxZoom'] != ""){
                    viewData['maxZoom'] = formData['maxZoom'];
                }
                if(formData['minZoom'] != null && formData['minZoom'] != ""){
                    viewData['minZoom'] = formData['minZoom'];
                }
                if(formData['center'] != null && formData['center'] != ""){
                    viewData['center'] = formData['center'];
                }
                if(formData['projection'] != null && formData['projection'] != ""){
                    viewData['projection'] = formData['projection'];
                }
                $.ajax({
                    type:'post',
                    dataType:'json',
                    url:url,
                    data:{
                        mapId:mapId,
                        mapName:formData['mapName'],
                        pixelRatio:formData['pixelRatio'] == null || formData['pixelRatio'] == "" ? null:parseFloat(formData['pixelRatio']),
                        logo:formData['logo'],
                        view:viewData,
                        description:formData['description']
                    },
                    success:function (data) {
                        layer.msg(data.status);
                        window.parent.layIndex = null;
                        window.parent.closeAllLayer();
                    },
                    error:function (error) {
                        console.log(error);
                    }
                });
                return false;
            });
        })
    </script>
</head>
<body>

</body>
</html>
